<!DOCTYPE html>
<html>

<head>
    <style>
    #box {
        position: absolute;
        top: 200px;
        left: 100px;
        width: 500px;
        height: 500px;
        border: 1px solid #DDD;
    }

    #ani1 {
        position: absolute;
        top: 15%;
        left: 50%;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: green;
        opacity: 0;
    }

    #box.play #ani1 {
        animation-name: fadeOut;
        animation-duration: 2s;
        animation-timing-function: linear;
        transition: left 2s linear, top 2s cubic-bezier(0.5, -0.5, 1, 1);
        left: 500px;
        top: 300px;
    }

    #ani2 {
        position: absolute;
        top: 12%;
        left: 40%;
        width: 30px;
        height: 30px;
        background: red;
    }

    #box.play #ani2 {
        animation-name: bombRightOut;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
    }

    #ani3 {
        position: absolute;
        top: 25%;
        left: 60%;
        width: 15px;
        height: 15px;
        background: yellow;
        opacity: 0;
    }

    #box.play #ani3 {
        animation-name: fadeOut;
        animation-duration: 2s;
        animation-timing-function: linear;
        transition: left 2s linear, top 2s cubic-bezier(0.5, -0.5, 1, 1);
        left: -300px;
        top: 500px;
    }

    #ani4 {
        position: absolute;
        top: 19%;
        left: 30%;
        width: 60px;
        height: 60px;
        background: blue;
    }

    #box.play #ani4 {
        animation-name: bombLeftOut;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
    }

    @keyframes fadeOut {
        0%, 100% {
            opacity: 0
        }
        20% {
            opacity: 1
        }
    }

    @keyframes bombLeftOut {
        0% {
            opacity: 1;
            transform-origin: 50% 50%;
            transform: rotate(0deg);
            -webkit-filter: blur(0px);
        }
        50% {
            opacity: 1;
            -webkit-filter: blur(0px);
        }
        100% {
            opacity: 0;
            transform-origin: -250% 60%;
            transform: rotate(210deg) scale(0.9);
            -webkit-filter: blur(20px);
        }
    }

    @keyframes bombRightOut {
        0% {
            opacity: 1;
            transform-origin: 50% 50%;
            transform: rotate(0deg);
            -webkit-filter: blur(0px);
        }
        50% {
            opacity: 1;
            -webkit-filter: blur(0px);
        }
        100% {
            opacity: 0;
            transform-origin: 300% 80%;
            transform: rotate(160deg) scale(0.9);
            -webkit-filter: blur(20px);
        }
    }
    </style>
</head>

<body>
    <div id="box">
        <div id="ani1"></div>
        <div id="ani2"></div>
        <div id="ani3"></div>
        <div id="ani4"></div>
    </div>
    <script>
    var $box = document.querySelector('#box')

    $box.addEventListener('click', function() {
        $box.classList.add('play')

        setTimeout(function() {
            $box.classList.remove('play')
        }, 2100)
    })
    </script>
</body>

</html>
